import {
  FolderAddOutlined,
  PlayCircleOutlined,
  PlusOutlined,
} from "@ant-design/icons";
import React, { memo } from "react";
import PropTypes from "prop-types";
import { TopRankingWrapper } from "./style";
import { fomatImgSizeY } from "@/utils/formatImgSize";
import { useDispatch } from "react-redux";
import { fetchPlayerAction } from "@/store/modules/player";

const TopRanking = memo((props) => {
  const { results } = props;
  const dispatch = useDispatch();

  function toPlay(id) {
    dispatch(fetchPlayerAction(id))
  }

  return (
    <TopRankingWrapper>
      <div className="header">
        <img
          className="headerLeft ShunCursor"
          src={fomatImgSizeY(results?.coverImgUrl, 140)}
          alt=""
        />
        <div className="headerRight">
          <div className="headerTitle ShunCursor">{results?.name}</div>
          <div className="headerIcons">
            <img
              className="img1 ShunCursor"
              src={require("@/assets/icons/播放.png")}
              alt=""
            />
            <img
              className="img2 ShunCursor"
              src={require("@/assets/icons/收藏夹1.png")}
              alt=""
            />
          </div>
        </div>
      </div>
      <div className="body">
        {results?.tracks?.slice(0, 10)?.map((item, index) => {
          return (
            <div className="item" key={item.id}>
              <div className="intro">
                <div className="num">{index + 1}</div>
                <div className="info ShunEllipese ShunCursor">{item.name}</div>
              </div>
              <div className="icons">
                <PlayCircleOutlined
                  className="ShunCursor"
                  onClick={(e) => toPlay(item.id)}
                />
                <PlusOutlined className="ShunCursor" />
                <FolderAddOutlined
                  style={{ fontSize: "18px" }}
                  className="ShunCursor"
                />
              </div>
            </div>
          );
        })}
      </div>
      <div className="footer ShunCursor">查看全部&gt;</div>
    </TopRankingWrapper>
  );
});

TopRanking.propTypes = {
  results: PropTypes.object,
};

export default TopRanking;
